<div class="annotations-settings">
    <table>
        <tr class="row">
            <td class="title">
                {{gettext 'Stroke: width / color'}}
            </td>
            <td class="controls stroke">
                <div data-dojo-attach-point="widthStroke"
                     data-dojo-props="constraints:{min:0,max:20,places:0},
                 invalidMessage: {{gettextString 'Please enter a numeric value'}},
                 rangeMessage: {{gettextString 'Invalid width: should be from 0 to 20 px'}}"
                     data-dojo-type="dijit/form/NumberTextBox"
                     title="{{gettext 'Stroke width, px'}}"
                     value="1"></div>
                <input
                        class="color-selector"
                        data-dojo-attach-point="colorStroke"
                        title="{{gettext 'Stroke color'}}"
                        type="color"
                        value="#cc9900"/>
            </td>
        </tr>
        <tr class="row">
            <td class="title">
                {{gettext 'Fill color'}}
            </td>
            <td class="controls fill">
                <input
                        class="color-selector"
                        data-dojo-attach-point="fillStroke"
                        title="{{gettext 'Fill color'}}"
                        type="color"
                        value="#ff9900"/>
            </td>
        </tr>
        <tr class="row">
            <td class="title">
                {{gettext 'Circle size, px'}}
            </td>
            <td class="controls circle-size">
                <div data-dojo-type="dijit/form/NumberTextBox"
                     data-dojo-attach-point="circleSize"
                     title="{{gettext 'Circle size, px'}}"
                     width="100%"
                     data-dojo-props="constraints:{min:1,max:100,places:0},
                 invalidMessage: {{gettextString 'Please enter a numeric value'}},
                 rangeMessage: {{gettextString 'Invalid width: should be from 1 to 100 px'}}"
                     value="5"></div>
            </td>
        </tr>
    </table>
</div>
